<template>
  <div>
    <van-card
      :num="item.num"
      :price="item.price"
      :title="item.title"
      :thumb="item.pic"
      v-for="(item, index) in $store.state.cartList"
      :key="index"
    >
    <template #thumb>
      <div>
        <van-checkbox v-model="item.checked"/>
        <van-image :src="item.pic"/>
      </div>
    </template>
      <template #num>
        <van-stepper v-model="item.num" />
      </template>
    </van-card>
    <!-- 底部提交栏 -->
    <van-submit-bar :price="$store.getters.totals*100" button-text="提交订单" style="bottom:50px;">
      <van-checkbox v-model="checked" @click="checkAll(checked)">全选</van-checkbox>
    </van-submit-bar>
  </div>
</template>
<script>
import {mapMutations} from "vuex";
export default {
  data() {
    return {
      checked:false,
    }
  },
  watch:{
    "$store.state.cartList":{
      handler(newValue){
        console.log(newValue);
        let num = 0;//存储选中的商品的条数
        //循环购物车中的商品，判断是否选中，如果选中，数量累加。
        newValue.forEach(item=>{
          if(item.checked == true){
            num++;
          }
        })
        console.log(num);
        //判断商品的总条数是否等于选中商品的个数
        if(num == newValue.length){
          this.checked = true;
        }else{
          this.checked = false;
        }
      },
      deep:true,
    }
  },
  methods:{
    ...mapMutations(['checkAll'])
  }
}
</script>